<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">
    </view>
    <view class="inner">
      <view class="tabListWrapSimple">
        <view class="tabList">
          <view class="tabLi" :class="{tabLiActive:n.value === tabListActiveValue}" v-for="(n,i) in tabList" :key="i" @click="tabListActiveIndexChange(n,i)">
            {{ n.label }}
          </view>
        </view>
      </view>
      <view class="orderList">
        <view class="orderLi" v-for="(n,i) in list" :key="i">
          <view class="olHeader">
            <view class="olHeaderId">订单编号：65255213489463</view>
            <view class="olHeaderStatus">待派工</view>
          </view>
          <view class="olBody">
            <view class="olBody1"></view>
            <view class="olBody2">
              <view class="olBody21">双舱智水座</view>
              <view class="olBody22">ID:SZ15464</view>
            </view>
          </view>
          <view class="olBottom">
            <view class="olBtn olBtn1" @click="gotoDetail(n,i)">查看信息</view>
            <view class="olBtn olBtn2">取消预约</view>
          </view>
        </view>
      </view>

      <view class="listPlaceholder" :style="{background:'white'}" v-if="_.size(list) === 0">
        <view class="listPlaceholderImage"></view>
        <view class="listPlaceholderText1">您还没有历史服务工单</view>
      </view>

    </view>
    <view class="innerNext">
    </view>
    <menu-bottom></menu-bottom>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [
        {},
        {},
      ],
      tabList: [
        { label: '全部', value: '' },
        { label: '待派工', value: '1' },
        { label: '待服务', value: '2' },
        { label: '待评价', value: '3' },
        { label: '已完结', value: '4' },
      ],
      tabListActiveIndex: 0,
      tabListActiveValue: this.$Route.query.type,
    }
  },
  onLoad(){
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    gotoDetail(n, i){
      util.linkTo('/pages/user/orderDetail?id=1111')
    },
    tabListActiveIndexChange(n, i){
      this.tabListActiveValue = n.value
    },
  },
}
</script>
<style lang="scss">

page {
  background-color: #F7F7F7;
}

.innerPre {

}

.inner {

  padding: 24px;
}

.innerNext {

}

.orderList {

  .orderLi {
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    padding: 24px;

    margin-bottom: 20px;

    opacity: 1;
    .olHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #00000008;
      .olHeaderId {
        font-size: 28px;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.8500000238418579);
        line-height: 44px;
      }

      .olHeaderStatus {
        font-size: 28px;
        font-weight: 400;
        color: #177FFF;
        line-height: 44px;
      }
    }


    .olBody {
      padding: 20px 0;
      display: flex;
      align-items: flex-start;
      .olBody1 {
        width: 92px;
        height: 112px;
        opacity: 1;
        background-color: lightgrey;
      }

      .olBody2 {
        margin-left: 40px;
        .olBody21 {
          font-size: 32px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 48px;
        }

        .olBody22 {
          font-size: 28px;
          font-weight: normal;
          color: rgba(0, 0, 0, 0.45);
          line-height: 44px;
        }
      }

    }


    .olBottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .olBtn {
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid rgba(0, 0, 0, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 28px;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.65);
        line-height: 39px;
        padding: 10px 20px;
        margin-left: 20px;
      }
      .olBtn1 {

      }

      .olBtn2 {

      }
    }
  }


}

</style>
